<template>
  <div class="blog-category-detail blog-section card-item">
    <span class="name">{{ route.params?.name }}</span>

    <div class="category-detail-list">
      <div v-for="(item, index) in blogStore.blogList"
           :key="index" class="item" @click="viewBlogClick(index)">
        <span class="number">{{ index+1 }}</span>
        <span class="date">{{ item?.createTime }}</span>
        <span class="title">{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useBlogStore } from '@/store/blog.ts'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'

const blogStore = useBlogStore()
const router = useRouter()
const route = useRoute()

onMounted(async () => {
  const categoryName = route.params.name as string
  await blogStore.queryBlogByCondition({
    category: categoryName
  })
})

const viewBlogClick = async (index: number) => {
  const blogId = blogStore.blogList[index].id
  await router.push({ name: 'DetailId', params: { id: blogId } })
}
</script>

<style scoped lang="scss">
@use "@/styles/blog/blog.category.detail.module";
</style>
